<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author YDZ
-->
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
      </template>
      <!-- <template #toolbar>
        <a-button type="default" @click="handleExport()">
          <Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
        </a-button>
        <a-button type="primary" @click="handleForm({})" v-auth="'cardd:order:carddYcdd:edit'">
          <Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
        </a-button>
        <a-button type="primary" @click="handleOrderCancel()" v-auth="'cardd:order:carddYcdd:edit'">
          <Icon icon="" /> {{ t('订单取消') }}
        </a-button>
        <a-button
          type="primary"
          @click="handleOrderRecover()"
          v-auth="'cardd:order:carddYcdd:edit'"
        >
          <Icon icon="" /> {{ t('订单恢复') }}
        </a-button>
      </template> -->
      <template #firstColumn="{ record }">
        <a @click="handleForm({ id: record.id })">
          {{ record.ycddDdbh }}
        </a>
      </template>

      <template #time="{ record, column }">
        <div  v-for="(item,index) in record[column.dataIndex]" :key="index" style="margin-bottom: 10px;">
          <!-- <span style="cursor: pointer;" @click="handlexq(item)">{{item.orderCode}}</span> -->
          <span style="cursor: pointer;" @click="handlexq(item)">{{item.cusName}} {{item.deptName}}</span>
        </div>
        <!-- <div v-if="record[column.dataIndex]" :style="{background:'#5ce677'}" style="width: 100%;height: 30px;cursor: pointer;">
          <Dropdown placement="bottom" >
           <div  style="width: 100%;height: 100%;"></div>
            <template #overlay>
              <Menu >
                <MenuItem  v-for="(item,index) in record[column.dataIndex]" :key="index" @click="handlexq(item)">
                  <span>{{item.orderCode}}</span>
                </MenuItem>
              </Menu>
            </template>
          </Dropdown>
        </div> -->
      </template>
    </BasicTable>
    <InputForm @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsCarddOrderCarddYcddList',
    components: { Menu, Dropdown, MenuItem: Menu.Item },
  });
</script>
<script lang="ts" setup>
  import { defineComponent,unref,onMounted,ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import {
    carddYcddDelete,
    carddYcddListData,
    carddYcddCancel,
    carddYcddRecover,
    carListByWeek
  } from '/@/api/cardd/order/carddYcdd';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { FormProps } from '/@/components/Form';
  import { Menu, Dropdown } from 'ant-design-vue';
  import InputForm from './form.vue';

  const { t } = useI18n('cardd.order.carddYcdd');
  const { showMessage } = useMessage();
  const { meta } = unref(router.currentRoute);

  const getTitle = {
    icon: meta.icon || 'i-ant-design:book-outlined',
    value: meta.title || t('车辆周报管理'),
  };

  const searchForm: FormProps = {
    baseColProps: { lg: 8, md: 8 },
    labelWidth: 90,
    schemas: [
    {
        label: t('车辆类型'),
        field: 'btPpxh',
        // component: 'Input',
        component: 'Select',
        componentProps: {
          dictType: 'car_type',
          allowClear: true,
          // onChange: handleSuccess,
        },
      },
      {
        label: t('车牌号'),
        field: 'btCph',
        component: 'Input',
      },
     
    ],
  };

  const tableColumns: BasicColumn[] = [
  {
      title: t('车辆类型'),
      dataIndex: 'carType',
      // key: 'a.ycdd_ppxh',
      // dictType: 'car_type',
      // sorter: true,
      width: 80,
      align: 'center',
      fixed: 'left',
    },
    {
      title: t('车牌号'),
      dataIndex: 'carNo',
      // key: 'a.ycdd_cph',
      // sorter: true,
      width: 80,
      align: 'center',
      fixed: 'left',
    },
    // {
    //   title: t('星期一'),
    //   dataIndex: 'aaa',
    //   width: 100,
    //   align: 'center',
    //   slot: 'time',
    // },
    // {
    //   title: t('星期二'),
    //   dataIndex: 'aaa',
    //   width: 100,
    //   align: 'center',
    //   slot: 'time',
    // },
    // {
    //   title: t('星期三'),
    //   dataIndex: 'aaa',
    //   width: 100,
    //   align: 'center',
    //   slot: 'time',
    // },
    // {
    //   title: t('星期四'),
    //   dataIndex: 'aaa',
    //   width: 100,
    //   align: 'center',
    //   slot: 'time',
    // },
    // {
    //   title: t('星期五'),
    //   dataIndex: 'aaa',
    //   width: 100,
    //   align: 'center',
    //   slot: 'time',
    // },
    // {
    //   title: t('星期六'),
    //   dataIndex: 'aaa',
    //   width: 100,
    //   align: 'center',
    //   slot: 'time',
    // },
    // {
    //   title: t('星期日'),
    //   dataIndex: 'aaa',
    //   width: 100,
    //   align: 'center',
    //   slot: 'time',
    // },
    
  ];

  const actionColumn: BasicColumn = {
    width: 160,
    actions: (record: Recordable) => [
      {
        icon: 'i-clarity:note-edit-line',
        title: t('编辑用车订单'),
        onClick: handleForm.bind(this, { id: record.id }),
        auth: 'cardd:order:carddYcdd:edit',
      },
      {
        icon: 'i-ant-design:delete-outlined',
        color: 'error',
        title: t('删除用车订单'),
        popConfirm: {
          title: t('是否确认删除用车订单'),
          confirm: handleDelete.bind(this, record),
        },
        auth: 'cardd:order:carddYcdd:edit',
      },
    ],
  };

  function getThisWeekDates() {
    const today = new Date();
    // 获取今天是星期几 (0-6 对应 周日-周六)
    const dayOfWeek = today.getDay();
    // 定义开始日期为本周的周一
    const startOfWeek = new Date(today);
    startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));
    startOfWeek.setHours(0, 0, 0, 0); // 设置时间为午夜

    const weekDates = [];
    for (let i = 0; i < 7; i++) {
        const date = new Date(startOfWeek);
        date.setDate(startOfWeek.getDate() + i);
        // 将日期格式化为 YYYY-MM-DD 格式
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        weekDates.push(`${year}-${month}-${day}`);
    }

    return weekDates;
}

let lists = ref<any>([]);
  onMounted(async () => {
    let arr = getThisWeekDates()
    arr.forEach(item=>{
      tableColumns.push({
          title: item,
          dataIndex: item,
          width: 100,
          align: 'center',
          slot: 'time',
      })
    })
    
    setProps({
      api: carListByWeek,
      beforeFetch: (params) => {
        params.btKsrq = arr[0]
        return params;
      },
      afterFetch:async (list) => {
        lists.value = await list.map(item=>{
          return {
            ...item,
            ...item.hourMap
          }
          
          
        })
        
        console.log(tableColumns,'tableColumns=======');
        console.log(lists.value);
        return lists.value;
      },
      columns: tableColumns,
      // actionColumn: actionColumn,
      formConfig: searchForm,
      showTableSetting: false,
      useSearchForm: true,
      canResize: true,
      pagination:false,
      showIndexColumn:false,
    });
    // if (!listTabConfig.value.immediate) {
    //   reload();
    // }
  });

  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { reload, getForm, getSelectRowKeys,setProps }] = useTable();


  function handlexq(item) {
    openDrawer(true, {
      id:item.orderId
    });
  }
  function handleForm(record: Recordable) {
    openDrawer(true, record);
  }

  const [registerImportModal, { openModal: importModal }] = useModal();

  async function handleDelete(record: Recordable) {
    const params = { id: record.id };
    const res = await carddYcddDelete(params);
    showMessage(res.message);
    handleSuccess(record);
  }

  // 订单取消
  async function handleOrderRecover() {
    if (getSelectRowKeys().length) {
      const res = await carddYcddRecover({ selIds: getSelectRowKeys().join(',') });
      showMessage(res.message);
      handleSuccess({});
    } else {
      showMessage('请先选中要恢复的用车订单！', 'error');
    }
  }

  //订单恢复
  async function handleOrderCancel() {
    if (getSelectRowKeys().length) {
      const res = await carddYcddCancel({ selIds: getSelectRowKeys().join(',') });
      showMessage(res.message);
      handleSuccess({});
    } else {
      showMessage('请先选中要取消的用车订单！', 'error');
    }
  }

  function handleSuccess(record: Recordable) {
    reload({ record });
  }
</script>

<style scoped >
 /deep/.ant-table-cell-ellipsis{
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* margin: 0 !important; */
 }
</style>